<p-messages [(value)]="msg"></p-messages>
<div class="content-section implementation GridDemo" id="MalfunctionEdit" >
    <div class="title col-sm-12">
        <div class="col-sm-1">
            <span>编辑故障单</span>
        </div>
        <div class="col-sm-11 pull-right">
            <button type="button"
                    class="pull-right"
                    pButton
                    [routerLink]="['/index/maintenance/malfunctionBase']"
                    icon="fa-close"
                    style="width: 30px"></button>
        </div>
    </div>
    <form [formGroup]="myForm" class="form-horizontal">
        <div class="form-group">
                <label class="col-sm-1 control-label">服务单号：</label>
                <div class="col-sm-3 ui-fluid-no-padding">
                    <input type="text"
                           pInputText
                           placeholder="自动生成"
                           [(ngModel)]="malfNumber"
                           readonly
                           class=" form-control"
                           formControlName="malfNumber"/>
                </div>
            <label class="col-sm-1 control-label">来源：</label>
            <div class="col-sm-3  ui-fluid-no-padding ui-fluid">
                <p-dropdown [options]="malSourceOptins"
                            [(ngModel)]="malSource"
                            optionLabel="name"
                            [style]="{'width':'100%'}"
                            [ngModelOptions]="{standalone: true}"></p-dropdown>
            </div>
            <label class="col-sm-1 control-label">状态：</label>
            <div class="col-sm-3  ui-fluid-no-padding ">
                <input type="text" pInputText placeholder="新建"
                       class=" form-control"
                       [(ngModel)]="malStatus" readonly
                       formControlName="malStatus"/>
            </div>
        </div>
        <div class="form-group">
            <label  class="col-sm-1 control-label">
                <span ngClass="start_red">*</span>
                报告人：
            </label>
            <div class="col-sm-3 ui-fluid-no-padding">
                <div class="col-sm-6 ui-fluid ui-fluid-no-padding">
                    <input type="text" pInputText  name="" placeholder="请选择报告人"
                           [(ngModel)]="reporter.name"
                           readonly class="cursor_not_allowed"
                           formControlName="reporterLabel"/>
                </div>
                <div class="col-sm-3 ui-fluid-no-padding ui-padding-10px">
                    <button ngClass="ui-g-12 ui-fluid-no-padding" pButton type="button" (click)="showTreeDialog('reporter')" label="选择"></button>
                </div>
                <div class="col-sm-3 ui-fluid-no-padding ui-padding-10px">
                    <button ngClass="ui-g-12 ui-fluid-no-padding" pButton type="button" (click)="clearTreeDialog('reporter')" label="清空"></button>
                </div>
            </div>
                <label  class="col-sm-1 control-label">组织：</label>
                <div class="col-sm-3 ui-fluid ui-fluid-no-padding">
                    <input type="text" pInputText
                           class=" form-control"
                           placeholder="选择报告人后自动显示"
                           [(ngModel)]="reporter.organization"
                           readonly   formControlName="reporterFather"/>
                </div>
                <label  class="col-sm-1 control-label">联系电话：</label>
                <div class="col-sm-3 ui-fluid ui-fluid-no-padding">
                    <input type="text" pInputText
                           class=" form-control"
                           placeholder="选择人员后自动显示" [(ngModel)]="reporter.mobile" readonly   formControlName="reporterRemark"/>
                </div>
        </div>
        <div class="form-group">
            <label class="col-sm-1 control-label">受理时间：</label>
            <div class="col-sm-3 ui-fluid ui-fluid-no-padding">
                <p-calendar [(ngModel)]="dealTime"
                            [showIcon]="true"
                            [locale]="zh"
                            name="end_time"
                            dateFormat="yy-mm-dd"
                            [required]="true"
                            [showTime]="true"
                            formControlName="dealTime">
                </p-calendar>
            </div>
            <label class="col-sm-1 control-label">
                <span ngClass="start_red">*</span>
                发生时间：
            </label>
            <div class="col-sm-3 ui-fluid ui-fluid-no-padding">
                <p-calendar [(ngModel)]="occurTime"
                            [showIcon]="true"
                            [locale]="zh"
                            name="end_time"
                            dateFormat="yy-mm-dd"
                            [required]="true"
                            [showTime]="true"
                            formControlName="occurTime">
                </p-calendar>
            </div>
            <label class="col-sm-1 control-label">
                <span ngClass="start_red">*</span>
                最终期限：
            </label>
            <div class="col-sm-3 ui-fluid ui-fluid-no-padding">
                <input type="text" pInputText placeholder="影响度、紧急度、优先级后自动显示"   class=" form-control"
                       [(ngModel)]="malDeadline" readonly formControlName="malDeadline"/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-1 control-label">
                <span ngClass="start_red">*</span>
                影响度：
            </label>
            <div class="col-sm-3 ui-fluid ui-fluid-no-padding">
                <p-dropdown [options]="malImpactOptions"
                            [(ngModel)]="malImpact"
                            optionLabel="name"
                            formControlName="malImpact"
                            [style]="{'width':'100%'}"
                            (onFocus)="onFocus()"
                ></p-dropdown>
            </div>
            <label class="col-sm-1 control-label">
                <span ngClass="start_red">*</span>
                紧急度：
            </label>
            <div class="col-sm-3 ui-fluid ui-fluid-no-padding">
                <p-dropdown [options]="malUrgencyOptions"
                            [(ngModel)]="malUrgency"
                            placeholder="{{ malUrgency?.name }}"
                            optionLabel="name"
                            formControlName="malUrgency"
                            [style]="{'width':'100%'}"
                            (onFocus)="onFocus()"
                ></p-dropdown>
            </div>
            <label class="col-sm-1 control-label">优先级：</label>
            <div class="col-sm-3 ui-fluid ui-fluid-no-padding">
                <input type="text" pInputText placeholder="选择影响度和紧急度后自动显示"
                       [(ngModel)]="malfPrority" readonly    class=" form-control"  formControlName="malfPrority"/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-1 control-label">故障级别：</label>
            <div class="col-sm-3 ui-fluid ui-fluid-no-padding">
                <p-dropdown [options]="malLevelOptions"
                            [(ngModel)]="malLevel"
                            placeholder="{{ malLevel?.name }}"
                            optionLabel="name"
                            [ngModelOptions]="{standalone: true}"
                            [style]="{'width':'100%'}">
                </p-dropdown>
            </div>
            <label class="col-sm-1 control-label">
                <span ngClass="start_red">*</span>
                所属系统：
            </label>
            <div class="col-sm-3  ui-fluid-no-padding">
                <div class="col-sm-6 ui-fluid ui-fluid-no-padding">
                    <input type="text" pInputText  name="" placeholder="请选择所属系统"
                           [(ngModel)]="belongSystem.label" readonly class="cursor_not_allowed"
                           formControlName="malLevel"/>
                </div>
                <div class="col-sm-3 ui-fluid-no-padding ui-padding-10px">
                    <button pButton type="button" (click)="showTreeDialog('belongSystem')" label="选择"></button>
                </div>
                <div class="col-sm-3 ui-fluid-no-padding ui-padding-10px">
                    <button pButton type="button" (click)="clearTreeDialog('belongSystem')" label="清空"></button>
                </div>
            </div>
                <label class="col-sm-1 control-label">发生地点：</label>
                <div class="col-sm-3  ui-fluid-no-padding">
                    <div class="col-sm-6 ui-fluid ui-fluid-no-padding">
                        <input type="text" pInputText  name="department" placeholder="请选择发生地点"    formControlName="belongSystemLabel"
                               [(ngModel)]="locationOccur.label" readonly class="cursor_not_allowed"/>
                    </div>
                    <div class="col-sm-3 ui-fluid-no-padding ui-padding-10px">
                        <button pButton type="button" (click)="showTreeDialog('locationOccur')" label="选择"></button>
                    </div>
                    <div class="col-sm-3 ui-fluid-no-padding ui-padding-10px">
                        <button pButton type="button" (click)="clearTreeDialog('locationOccur')" label="清空"></button>
                    </div>
                </div>
        </div>
        <div class="form-group">
            <label class="col-sm-1 control-label">
                <span ngClass="start_red">*</span>
                故障标题：
            </label>
            <div class="col-sm-11 ui-no-padding-left-15px ui-fluid">
                <input type="text" pInputText  placeholder="请填写故障标题"   formControlName="malTitle"
                       [(ngModel)]="malTitle"/>
            </div>
        </div>
        <div class="form-group ui-fluid">
            <label class="col-sm-1 control-label">
                <span ngClass="start_red">*</span>
                故障描述：
            </label>
            <div class="col-sm-11 ui-no-padding-left-15px ">
                     <textarea [rows]="5" pInputTextarea autoResize="autoResize"    formControlName="malDesc"
                               [(ngModel)]="malDesc"></textarea>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-1 control-label">
                上传附件：
            </label>
            <div class="col-sm-11 ui-fluid-no-padding " *ngIf="malStatus == '新建' ">
                <p-fileUpload name="file" url="{{ip}}/workflow/trouble/upload"
                              multiple="multiple"
                              accept="image/*,application/*,text/*"
                              chooseLabel="选择"
                              uploadLabel="上传"
                              cancelLabel="取消"
                              maxFileSize="3145728"
                              (onUpload)="onUpload($event)"
                              (onBeforeUpload)="onBeforeUpload($event)"
                              #form>
                    <ng-template pTemplate="content">
                        <ul *ngIf="uploadedFiles.length">
                            <li *ngFor="let file of uploadedFiles">{{file.name}} - {{file.size}} bytes</li>
                        </ul>
                    </ng-template>
                </p-fileUpload>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-1 control-label">
                关联服务目录：
            </label>
            <div class="col-sm-11 ui-fluid-no-padding">
                <div class="col-sm-10 ui-fluid ui-fluid-no-padding">
                    <input type="text" pInputText  name="department" placeholder="请选择关联服务目录"  formControlName="relativeCategoreLabel"
                           [(ngModel)]="relativeCategore.label" readonly class="cursor_not_allowed"/>
                </div>
                <div class="col-sm-1 ui-fluid-no-padding ui-padding-10px">
                    <button ngClass="ui-g-12 ui-fluid-no-padding" pButton type="button" (click)="showTreeDialog('relativeCategore')" label="选择"></button>
                </div>
                <div class="col-sm-1 ui-fluid-no-padding ui-padding-10px">
                    <button ngClass="ui-g-12 ui-fluid-no-padding" pButton type="button" (click)="clearTreeDialog('relativeCategore')" label="清空"></button>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label  class="col-sm-1 control-label">
                关联设备编号：
            </label>
            <div class="col-sm-11 ui-fluid-no-padding">
                <div class="col-sm-10 ui-fluid ui-fluid-no-padding">
                    <input type="text" pInputText  name="department" placeholder="请选择关联设备编号"     formControlName="relativeEquipLabel"
                           [(ngModel)]="relativeEquip.label" readonly class="cursor_not_allowed"/>
                </div>
                <div class="col-sm-1 ui-fluid-no-padding ui-padding-10px">
                    <button ngClass="ui-g-12 ui-fluid-no-padding" pButton type="button" (click)="showTreeDialog('relativeEquip')" label="选择"></button>

                </div>
                <div class="col-sm-1 ui-fluid-no-padding ui-padding-10px">
                    <button ngClass="ui-g-12 ui-fluid-no-padding" pButton type="button" (click)="clearTreeDialog('relativeEquip')" label="清空"></button>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-1 control-label">
                <span ngClass="start_red">*</span>
                分配至部门：
            </label>
            <div class="col-sm-5 ui-fluid-no-padding">
                <div class="col-sm-8 ui-fluid ui-fluid-no-padding">
                    <input type="text" pInputText  name="department"
                           placeholder="请选择部门"
                           [(ngModel)]="selectedDepartment.label" readonly
                           class=" form-control cursor_not_allowed"
                           formControlName="selectedDepartmentLabel"/>
                </div>
                <div class="col-sm-2 ui-fluid-no-padding ui-padding-10px">
                    <button ngClass="ui-g-12 ui-fluid-no-padding" pButton type="button" (click)="showTreeDialog('selectedDepartment')" label="选择"></button>
                </div>
                <div class="col-sm-2 ui-fluid-no-padding ui-padding-10px">
                    <button ngClass="ui-g-12 ui-fluid-no-padding" pButton type="button" (click)="clearTreeDialog('selectedDepartment')" label="清空"></button>

                </div>
            </div>
            <label class="col-sm-1 control-label">分配至个人：</label>
            <div class="col-sm-5 ui-fluid-no-padding">
                <p-dropdown [options]="malDepPersonOptions"
                            [(ngModel)]="malDepPerson"
                            optionLabel="name"
                            placeholder="请选择人员"
                            formControlName="malDepPerson"
                            [style]="{'width':'100%'}"></p-dropdown>
            </div>

        </div>
        <div class="form-group">
            <div class="col-sm-12 ui-no-padding-left-15px ui-no-padding-right-15px">
                <button class="pull-right  ui-button-secondary"  pButton type="button" [routerLink]="['/index/maintenance/malfunctionBase']" label="关闭" [disabled]="saved"></button>
                <button class="pull-right ui-margin-right-10px" pButton type="button" (click)="submitAndDistribute()" label="保存并分配" [disabled]="hadSaved"></button>
                <button class="pull-right ui-margin-right-10px" pButton type="button" (click)="submitTrick()" label="提交" [disabled]="hadSaved"></button>
                <button class="pull-right ui-margin-right-10px" pButton type="button" (click)="save()" label="保存" [disabled]="hadSaved"></button>
            </div>
        </div>
    </form>
    <p-dialog header="{{ dialogHeader }}" [(visible)]="departementDisplay" modal="modal" width="300" [responsive]="true">
        <p-tree [value]="filesTree4"
                selectionMode="{{ selectedMode }}"
                [(selection)]="selected"
                (onNodeExpand)="nodeExpand($event)"
                (onNodeSelect)="nodeSelect($event)"
        ></p-tree>
        <!--<div>Selected Nodes: <span *ngFor="let file of selected">{{file.label}} </span></div>-->
        <div style="margin-top:8px">Selected Node: {{selected ? selected.label : 'none'}}</div>
        <p-footer>
            <button type="button" pButton icon="fa-check" (click)="closeTreeDialog()" label="确定"></button>
            <button type="button" pButton icon="fa-close" (click)="departementDisplay=false" label="取消"></button>
        </p-footer>
    </p-dialog>
    <app-personel-dialog *ngIf="displayPersonel"
                         (dataEmitter)="dataEmitter($event)"
                         (displayEmitter)="displayEmitter($event)"></app-personel-dialog>
    <p-growl [(value)]="message"></p-growl>
    <p-growl [(value)]="message"></p-growl>
</div>
